ES5 vs ES6：動態物件屬性名稱比較

這個範例展示如何在 ES5 和 ES6 中使用動態的變數當作物件的屬性名稱，並詳細比較各種功能差異。

ES5 寫法

var key = "person name"; var person = {}; person[key] = "Chris"; person["person age"] = 21; console.log(person[key]); console.log(person["person name"]);

ES6 寫法

let key = "person name"; let person = { [key]: "Chris", "person age": 21 }; console.log(person[key]); console.log(person["person name"]);

輸出結果：

👈 點上方按鈕查看結果

功能比較表：ES5 vs ES6

功能 ES5 ES6（computed property）
靜態屬性名 ✅ 支援 ✅ 支援
變數作鍵名 ❌ 只能後設 ✅ [key]: value
鍵名可運算 ❌ 不支援 ✅ [key + i]
可讀性 😕 較差 😍 更清楚
一步完成 ❌ 要先宣告再賦值 ✅ 一次完成定義

📌 每個功能對應範例說明

1️⃣ 靜態屬性名（ES5 / ES6 都支援）

// ES5 var person = { name: "Chris", age: 21 }; // ES6 let person = { name: "Chris", age: 21 };

2️⃣ 變數作鍵名

// ES5：只能後設 var key = "email"; var obj = {}; obj[key] = "chris@example.com"; // ES6：直接使用變數當鍵名 let key = "email"; let obj = { [key]: "chris@example.com" };

3️⃣ 鍵名可運算

// ES5：不支援直接運算鍵名 var obj = {}; var i = 1; obj["item" + i] = "Book"; // ES6：支援運算式作為鍵名 let i = 1; let obj = { ["item" + i]: "Book" };

4️⃣ 可讀性比較

// ES5：分開寫，比較亂 var key = "username"; var user = {}; user[key] = "Chris"; // ES6：集中定義，可讀性高 let key = "username"; let user = { [key]: "Chris" };

5️⃣ 一步完成定義物件

// ES5：要先宣告，再設定屬性 var key = "city"; var location = {}; location[key] = "Hong Kong"; // ES6：一次完成 let key = "city"; let location = { [key]: "Hong Kong" };